JToolbar
Authors: David Underhill and James Chen More: Source and Documentation -- Greasemonkey Plugin Overview JToolbar is a reusable JavaScript web interaction that introduces highly interactive toolbars for web applications. Toolbars are integral to a large number of websites. They commonly appear as navigation panels or advertising banners at the edge of a webpage. Highly interactive web applications often provide some functionality through a toolbar too. Unfortunately, users have very limited control over these toolbars. Properties like size, position and orientation are usually fixed by web developers. In contrast, toolbars in desktop applications are generally very flexible. Users can rearrange their layout or drag them to different docking positions. JToolbar brings these flexibilities to online toolbars. User Interactions JToolbar empowers users with the following controls: * Hidden vs. pinned state. A pinned toolbar is always visible and occupies a fixed amount of space. A hidden toolbar is usually invisible and only appears when the mouse cursor hovers over it. This can be used to hide large navigation panels on some websites to increase the amount of screen space for reading. * Flexible docking position. A toolbar can be relocated to a different side of the enclosing container (left, right, top or bottom) by clicking and dragging the toolbar. * Floatability. A toolbar can be either floating or anchored. In the floating state the toolbar is not attached to any container and can be dragged to any position on the page. * Memory. A toolbar remembers its position and settings via cookies so that it will always show up where the user last left it, even if they leave the page. Abstractions for Developers JToolbar provides a simple programming abstraction for web developers. Due their ubiquity JToolbar has a special constructor for building navigation panels. Developers simply specify a sequence of label-link pairs and JToolbar automatically creates a toolbar with those links. Hierarchical toolbars are supported when the existing toolbars are given as the values of links. More generally, any arbitrary HTML element can be made into a JToolbar. This means that an existing toolbar or in fact, any content at all, can benefit from the flexibility of JToolbar. JToolbar attempts to strike a balance between ease-of-use and configurability. In the absence of explicit specifications JToolbar tries to infer certain parameters like what the default dimension and orientation of the the toolbar should be so that it can "just work". On the other hand, JToolbar provides an extensive set of customization methods so that more aggressive developers can fine tune the toolbar exactly to their liking. Developers can even register callbacks on "toolbar events" like an orientation or visibility change. A complete list of JToolbar options and features are available here. Implementation and Reusability This section evaluates our major implementation decisions and how they affected the reusability of the JToolbar interaction. Client-Side Only JToolbar is a client-side piece of JavaScript. This makes it easy to reuse and integrate with a wide variety of webpages. There were no real disadvantages to making it server-independent. Standalone Component JToolbar is a standalone component and does not depend on any existing Javascript libraries. One advantage of this choice is that it is easier for people to acquire and reuse JToolbar. Another bonus is the total amount of code needed for JToolbar is kept to a minimum. A disadvantage is that we probably could have re-used animation techniques from an external library, though that would have probably been overkill given our implementation which could be smaller and more efficient since it was tailored to the toolbar. Namespaced JToolbar's code is name-spaced. This means the only global identifier it introduces is JTB which refers to object which contains all of the JToolbar functionality. This means that JToolbar can be reused in conjunction with any other code. Layout Flexibility The most difficult aspect of JToolbar is correctly integrating it into the page. This was surprisingly difficult. Initially we wanted to use table elements, but this was incompatible with hierarchical toolbars. Next, we tried to use div elements with various display styles but this also lacked the flexibility we needed - it prevented us from being able to have an unpinned toolbar not displace its attached content. Finally, we settled on creating a container to wrap around each toolbar and its content. We used absolute positioning within that container to give us the flexibility we need, though this unfortuntely increased the difficulty of sizing components. Sizing elements was easy if we forced the user to specify static sizes for their toolbars and the attached content, but this made JToolbar more difficult to use (especially with fluid websites). We relaxed this restriction by providing support fluid (percentage-based) lengths as well "natural" lengths (those which are sized to fit their contents). The progression from static sizes to these more flexible lengths required several iterations and a special internal helper class, but the flexibility it delivered was well worth the effort and complexity. Greasemonkey To demonstrate JToolbar's reusability and flexibility, we created a Greasemonkey script. Greasemonkey (GM) is a Firefox plugin which allows users to customize webpages with custom JavaScript code. We did not have to make any changes to our code to make it into a useful GM script. We simply had to add the GM header. We posted the JToolbar GM script on the GM website here - if you have GM, you can install our script with a single click. As an example, the script makes the toolbar on the Stanford Computer Science department's webpage into a JToolbar. This only took a single line of code: new JTB.Toolbar('body', 'cs-title').setImagePath('http://www.stanford.edu/~dgu/images_opaque/'); Performance JToolbar is a complicated interaction so we paid careful attention to performance. We avoid relatively expensive UI refreshes until they are necessary. Furthermore, whenever we manipulate the DOM, we first hide the toolbar container so that the browser only has to recalculate the layout twice (once to hide it, once to show it) rather than many times as various parameters are tweaked. We even implemented a memoization and caching scheme to prevent unnecessary recalculations. As a result, there are no noticeable performance problems on any of the platforms we tested (even a relatively old one). Critique Weaknesses The biggest weakness is that JToolbar does not try to be compatible with any browser other than Firefox. In fact, it originally exposed some differences between the Linux (the primary platform on which JToolbar was developed) and Windows versions of Firefox though we cleaned those problems up. Another weakness of JToolbar is that it only supports a subset of the units which HTML permits. In particular, it only understands pixels and special keywords for border sizes. This means it will not work properly if units are specified in inches, etc. This does not seem like a major disadvantage for two reasons. First, it is possible to add such support without any sweeping design changes (the implementation of the lengthToPixels() method would be the only change). Second, it seems unusual for these other units to be used. Finally, JToolbar could be more forgiving of improper uses of the API. It does not sanity check that values make sense or even have the appropriate type. This can make it more difficult to use, though fortunately the API is relatively straight-forward and incorrect usages tend to cause a problem quickly which makes them reasonable to track down. The JToolbar graphics could also be improved. The basic mode would be more versatile if it had more display options. It could also be improved by trying to infer some basic CSS properties. In the future, we would like to work on fixing these weaknesses, as well as creating good introductory documentation. This future work is documented on our to-do list. Strengths JToolbar is simple to use, but it exposes useful hooks for power users. As we demonstrated in the Greasemonkey section, it can be used to enhance arbitrary webpages - often with just one line of code. It avoids conflicts with and dependencies on external JavaScript code to make it easy to distribute and start using. You can even have more than one JToolbar on a single page. Overall, JToolbar is a flexible, intuitive, reusable, and useful new web interaction. It brings important new functionality to the web - functionality which is surprisingly absent from the largely static toolbars which dominate the web today.